<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.2">
    <title>{{ title|default('Presentation') }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="css/code-highlight.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/extension.css">
    <style>
        :root {
            --slide-width: {{ slide_width }}px;
            --slide-height: {{ slide_height }}px;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
</head>

<body>
    {% for slide in slides %}
    <div class="slide-container">
        {% set layout = slide.layout|default('content') %}
        {% with slide_number=loop.index %}
        {% include 'layouts/' + layout + '.html' %}
        {% endwith %}
    </div>
    {% endfor %}
    <div class="floating-btn">
        <button class="action-btn" onclick="togglePresentationMode()">
            &#128187; Toggle Slideshow
        </button>
        <button class="action-btn" onclick="window.print()">
            &#128424; Save as PDF
        </button>
    </div>
    <script type="module">
        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
        const colorScheme = getComputedStyle(document.documentElement).getPropertyValue('--colorscheme').trim();
        var mermaid_theme = "default";
        if (colorScheme === "dark") {
            console.log("Using dark theme");
            mermaid_theme = "dark";
        }
        mermaid.initialize({ startOnLoad: true, theme: mermaid_theme });
    </script>
    <script src="js/main.js"></script>
    <script src="js/extension.js"></script>
</body>

</html>
